\begin{frame}[fragile]{Primeros pasos con Gosu}
  \begin{block}{Cabeceras}
    Únicamente tendremos que usar
\begin{verbatim}
#include <Gosu/Gosu.hpp>
#include <Gosu/AutoLink.hpp> // Solo windows
\end{verbatim}

    Con esto ya estaremos incluyendo todos los ficheros necesarios.
  \end{block}
\end{frame}

\begin{frame}{La clase principal}
  Gosu está dividido en \textbf{clases}. La clase \texttt{Gosu::Window}
  representa la ventana de juego, la clase principal de nuestro juego heredará
  de ella.
\end{frame}

\begin{frame}[fragile]{La clase principal}
  \begin{columns}[c]
    \column{.5\textwidth}
  \includegraphics[scale=0.23]{figura_game_loop.pdf}    

  \column{.5\textwidth}
\vspace{-3cm}
{\footnotesize
\begin{verbatim}
class Ventana 
   : public Gosu::Window{
public:
  Ventana() 
    : Gosu::Window(800, 600, false){ 
  }

  ~Ventana(){ /* destructor */ }

  void update(){
    // Lógica del juego
  }
  void draw(){
    // Dibujado de gráficos
  }
  void buttonDown(Gosu::Button B){
    // Pulsaciones de teclas
  }
};
\end{verbatim}
}
  \end{columns}

\end{frame}

\begin{frame}[fragile]{Constructor de Gosu::Window}
\begin{verbatim}
class Ventana : public Gosu::Window{

public:
  Ventana() : Gosu::Window(800, 600, false){
\end{verbatim}
  
  \begin{itemize}
  \item \texttt{Ventana }hereda de \texttt{Gosu::Window}.
  \item En el constructor del padre, indicamos ancho, alto y si queremos
    pantalla completa.
  \end{itemize}
\end{frame}

\begin{frame}[fragile]{Métodos de Gosu::Window}
\begin{verbatim}
void update(){
  // Aquí debe ir la lógica del juego
}

void draw(){
  // Aquí se deben pintar los gráficos
}

void buttonDown(Gosu::Button boton){
  // Este método se lanza cuando se pulsa un botón
}
\end{verbatim}  
\end{frame}

\begin{frame}[fragile]{Abriendo y cerrando la ventana}
Para abrir una ventana de juego usaremos el método \texttt{show()}:
\begin{verbatim}
int main(){
  Ventana V;
  V.show();
}
\end{verbatim}

Para cerrar nuestra ventana, podemos usar el método \texttt{close()}, 
por ejemplo al pulsar cualquier botón:

\begin{verbatim}
void buttonDown(Gosu::Button B){
  close();
}
\end{verbatim}  
\end{frame}

\begin{frame}{Primera tarea}
  \begin{itemize}
  \item Abrir el fichero \texttt{main.cpp}
    \begin{itemize}
    \item Linux: en la carpeta \texttt{Parte 1}. \\ Para compilar, ejecutar
      ``\texttt{make libgosu}'' y luego ``\texttt{make}''. \\ Para ejecutar, \texttt{./programa}
    \item Windows: en el proyecto \texttt{Parte 1}
    \end{itemize}
  \item Crear una clase \texttt{Ventana} derivada de \texttt{Gosu::Window} tal y
    como hemos explicado.
  \item Hacer que se muestre la ventana y que se cierre al pulsar una tecla.
  \item La solución la tenéis en el fichero \\
    \texttt{soluciones/Parte 1/main\_paso1.cpp}
  \end{itemize}  
\end{frame}

\begin{frame}[fragile]{Gráficos en Gosu}
  \begin{columns}
    
    \column{0.5\textwidth}

    \includegraphics[scale=1]{img/maya.jpg}

    \column{0.5\textwidth}

    Los gráficos son una de las piezas más importantes de un juego. 
    
    \hspace{1cm}

    Cada objeto \texttt{Gosu::Window} tiene un método \texttt{graphics()} que
    devuelve el destino donde todos los elementos gráficos (imágenes y fuentes)
    se van a pintar.
  \end{columns}  
\end{frame}

\begin{frame}[fragile]{Imágenes en Gosu}
  En Gosu las imágenes se representan con la clase
  \texttt{Gosu::Image}. 

\begin{verbatim}
Gosu::Image * miImagen = 
   new Gosu::Image(graphics(), L"rutaDeImagen.png");
\end{verbatim}

Y se dibujan así (dentro del método \texttt{Ventana::draw}):

\begin{verbatim}
miImagen -> draw(posX, posY, posZ);
\end{verbatim}

Es posible escalar las imágenes y tintarlas utilizando un color:

\begin{verbatim}
miImage -> draw(posX, posY, posZ, escalaX, escalaY
           Gosu::Color(255, 255, 0, 0)); // Tinte rojo
\end{verbatim}
\end{frame}

\begin{frame}[fragile]{Apuntes sobre las rutas}
  Si os habéis fijado, las rutas de los ficheros se indican utilizando
  \texttt{wstring}, que se indican poniendo una L delante:

\begin{verbatim}
wstring ruta = L"rutaFichero.png";
\end{verbatim}
  
  Para que el juego pueda encontrar las imágenes, hay que anteponer la salida de
  la función \texttt{Gosu::sharedResourcePrefix()}, que nos devuelve el
  directorio en el que está el ejecutable:

\begin{verbatim}
wstring directorio = Gosu::sharedResourcePrefix()
wstring rutaCompleta = directorio + L"rutaFichero.png";
\end{verbatim}
\end{frame}

\begin{frame}{Segunda tarea}
  \begin{itemize}
  \item Añadir a la clase \texttt{Ventana }un atributo \texttt{Gosu::Image * imagen}.
  \item En el constructor de la \texttt{Ventana}, cargar la imagen
    \texttt{``imagen.png''} en el atributo que hemos definido.
  \item En el método \texttt{draw} de \texttt{Ventana}, pintar la imagen en las
    coordenadas que queráis.
  \item La solución la tenéis en el fichero \\
    \texttt{soluciones/Parte 1/main\_paso2.cpp}
  \end{itemize}
\end{frame}

\begin{frame}{Textos en Gosu}
  \begin{center}
    {\Huge Los textos}

    \hspace{0cm}

    {\LARGE también son importantes}

    \hspace{0cm}

    para transmitir mensajes.

    \hspace{0cm}
  \end{center}

  Utilizaremos la clase \texttt{Gosu::Font} para cargar una fuente y luego
  escribir un texto con ella. Funciona igual que \texttt{Gosu::Image}.
\end{frame}

\begin{frame}[fragile]{Cargando y mostrando fuentes}
  Las fuentes se cargan igual que las imágenes, con la diferencia de que hay que
  añadir el tamaño y si queremos negritas o no:

\begin{verbatim}
Gosu::Font * miFuente = new Gosu::Font(
             graphics(), 
             directorio + L"nombreFuente.ttf",
             30, // El tamaño de la fuente en píxeles
             0); // 0 indica que no queremos negritas
\end{verbatim}

Para escribir, el método también se llama \texttt{draw}: 

\begin{verbatim}
miFuente -> draw(posX, posY, posZ,
                 L"Este es el texto que aparecerá");
\end{verbatim}
\end{frame}

\begin{frame}{Tercera tarea}
  \begin{itemize}

  \item Añadir a la clase \texttt{Ventana} un atributo \\ 
    \texttt{Gosu::Font * fuente}.

  \item En el constructor de la \texttt{Ventana}, cargar la fuente
    \texttt{arial.ttf} en el atributo que hemos definido, con un tamaño de 60
    píxeles.

  \item En el método \texttt{draw} de \texttt{Ventana}, pintar un mensaje con la
    fuente que acabamos de cargar usando su método \texttt{draw}.

  \item La solución la tenéis en el fichero \\
    \texttt{soluciones/Parte 1/main\_paso3.cpp}
  \end{itemize}
\end{frame}

\begin{frame}[fragile]{Interactuando con el usuario}
  El método \texttt{buttonDown} se ejecutará cuando el usuario pulse un botón,
  que recibimos como parámetro. Podemos reaccionar ante eso para, por ejemplo,
  cambiar el valor de una variable.

\begin{verbatim}
void buttonDown(Gosu::Button B){
  if (B == Gosu::kbEscape){
    close();
  }else{
    otraTecla = true;
  }
}
//...
private:
  bool otraTecla;
\end{verbatim}
\end{frame}

\begin{frame}[fragile]{Leyendo la posición del ratón}
  Además, la clase \texttt{Gosu::Window} nos ofrece un método \texttt{input()}
  que nos devuelve un objeto que nos da información sobre la entrada del
  usuario, como por ejemplo la posición del ratón:

\begin{verbatim}
input().mouseX();
input().mouseY();
\end{verbatim}
  
\end{frame}

\begin{frame}{Cuarta tarea}
  \begin{itemize}

  \item Añadir a la clase \texttt{Ventana} un atributo entero: \texttt{int
      contador} e inicializarlo a 0 en el constructor.

  \item Comprobar en el método \texttt{buttonDown} si se ha pulsado la tecla
    escape (cuyo código es \texttt{Gosu::kbEscape}). En ese caso, cerrar la
    aplicación (usando \texttt{close()}).

  \item Si se ha pulsado otra tecla, aumentar el contador. Cuando el contador
    sea mayor que 5, cambiar el mensaje que escribimos en la tarea anterior.

  \item La solución la tenéis en el fichero \\
    \texttt{soluciones/Parte 1/main\_paso4.cpp}
  \end{itemize}
\end{frame}